<template>
  <div class="contentbox">
    <dl v-for="(n,index) in items">
      <dt class="s_top">
      <span class="anniu" @click="checkall(index)">√</span>
      <div class="miaoshu">
        <img :src="n.icon" alt="">
        <span>{{n.storename}}</span>
      </div>
      <div class="address">
        <span>香港转运</span>
        <img src="../../assets/img/y_icon2.png" alt="">
        <img src="../../assets/img/y_icon3.png" alt="" class="jiantou">
      </div>
      </dt>
      <dd class="s_bottom">
        <span class="anniu" @click="check(index)">√</span>
        <div class="s_miaoshu">
          <img :src="n.img1" alt="">
          <div class="size">
            <span>{{n.name}}</span>
            <span class="daxiao">颜色:黑色</span>
          </div>
        </div>
        <div class="goumai">
          <span class="new">￥{{n.newprice}}</span>
          <div class="jiajian">
            <span @click="subs(index)">-</span>
            <span class="num">{{n.num}}</span>
            <span @click="adds(index)">+</span>
          </div>
        </div>
      </dd>
    </dl>
  </div>
</template>
<script type="text/ecmascript-6">
    export default {
      props:["items"],
      data(){
        return{
          itemg:[],
          tnum:0,
          tmoney:0
        }
      },
      methods:{
        send:function () {
          this.$emit("tmoney",this.tmoney);
        },
        adds:function (idx){
          this.items[idx].num++;
          this.counter();
        },
        subs:function (idx) {
          if(this.items[idx].num <=1){
            this.items[idx].num =1;
          }else{
            this.items[idx].num--;
            this.counter();
          }
        },
        checkall:function(){
          if ($(event.currentTarget).attr("class")=="anniu checked"){
            $(event.currentTarget).removeClass("checked");
            $(event.currentTarget).parent().next().children(".anniu").removeClass("checked");
          }
          else {
            $(event.currentTarget).addClass("checked");
            $(event.currentTarget).parent().next().children(".anniu").addClass("checked");
            }
          this.counter();
            for (var i=0;i<$(".anniu").length;i++){
                if ($(".anniu").eq(i).attr("class")=="anniu"){
                  $(".allanniu").removeClass("checked");
                  return;
                }
                else {
                  $(".allanniu").addClass("checked");
                }
            }
          },
        check:function(){
          if ($(event.currentTarget).attr("class")=="anniu checked"){
            $(event.currentTarget).removeClass("checked");
            $(event.currentTarget).parent().prev().children(".anniu").removeClass("checked");
          }
          else {
            $(event.currentTarget).addClass("checked");
            $(event.currentTarget).parent().prev().children(".anniu").addClass("checked");
          }
          this.counter();
          for (var i=0;i<$(".anniu").length;i++){
            if ($(".anniu").eq(i).attr("class")=="anniu"){
              $(".allanniu").removeClass("checked");
              return;
            }
            else {
              $(".allanniu").addClass("checked");
            }
          }
        },
        counter:function(){
          this.tmoney=0;
          for(let i=1;i<$(".anniu").length;i+=2){
            if($(".anniu").eq(i).attr("class")=="anniu checked"){
              var price=parseInt($(".anniu").eq(i).parent().children(".goumai").children(".new").html().substring(1));
              var num=parseInt($(".anniu").eq(i).parent().children(".goumai").children(".jiajian").children(".num").html());
              this.tmoney+=price*num;
            }
          }
          this.send();
        }
      }
    }
</script>
<style scoped lang="scss">
  .s_top {
    display: flex;
    padding: 0.1rem 0.1rem;
    border-bottom: 1px solid #dddddd;
    margin-top: 0.1rem;
    background: white; }

  .anniu{
    width: 0.2rem;
    height: 0.2rem;
    border: 1px solid gray;
    border-radius: 50%;
    font-size: 14px;
    text-align: center;
    color: white; }

  .miaoshu {
    display: flex;
    width: 58%;
    font-size: 14px;
    padding-top: 0.05rem;
    color: #777777;
    font-weight: bold;
    font-family: initial;
    line-height: 0.2rem; }

  .miaoshu img {
    width: 0.15rem;
    height: 0.2rem;
    margin-left: 0.2rem;
    margin-right: 0.1rem; }

  .address {
    display: flex;
    font-size: 14px;
    padding-top: 0.05rem; }

  .address img {
    width: 0.2rem;
    height: 0.2rem; }

  .jiantou {
    margin-left: 0.1rem; }

  .address span {
    margin-right: 0.1rem;
    font-family: initial;
    margin-top: 0.03rem; }
  .anniu{
    width: 0.2rem;
    height: 0.2rem;
    border: 1px solid gray;
    border-radius: 50%;
    font-size: 14px;
    text-align: center;
    color: white; }
  .s_bottom {
    display: flex;
    padding: 0.15rem 0.1rem;
    background: white; }

  .s_bottom .anniu, .s_bottom .allanniu {
    margin-top: 8%; }

  .s_miaoshu {
    display: flex;
    width: 58%;
    font-size: 16px;
    padding-top: 0.05rem;
    font-weight: bold;
    font-family: initial;
    line-height: 0.2rem; }

  .s_miaoshu img {
    width: 0.5rem;
    height: 0.8rem;
    margin-left: 0.18rem; }

  .size {
    display: flex;
    flex-direction: column;
    margin-left: 0.1rem; }

  .daxiao {
    color: #999999; }

  .goumai {
    width: 30%;
    display: flex;
    font-size: 14px;
    flex-direction: column;
    text-align: right;
    line-height: 0.25rem; }

  .new {
    color: red;
    font-size: 14px; }

  .old {
    text-decoration: line-through;
    color: #777777;
    font-family: initial;
    font-size: 12px; }

  .jiajian {
    display: flex;
    font-size: 14px; }

  .jiajian span {
    width: 32%;
    text-align: center;
    border: 1px solid #777777;
    margin-top: 0.1rem; }
  .checked{
    background:#e8065b;
    border:1px solid #e8065b;
  }
</style>
